{extend name="base" /}
{block name="css"}
<link rel='stylesheet' href='/static/hqui/libs/fullcalendar/core/main.css'/>
<link rel='stylesheet' href='/static/hqui/libs/fullcalendar/daygrid/main.css'/>
<link rel='stylesheet' href='/static/hqui/libs/fullcalendar/timegrid/main.css'/>
<style>
    /** 日历样式设置 */
    .fc-time-grid-event {
        cursor: pointer;
    }

    .fc-event-container > a:nth-child(odd) {
        background-color: #f05261;
        border-color: #f05261;
    }

    .fc-event-container > a:nth-child(even) {
        background-color: #48a8e4;
        border-color: #48a8e4;
    }

    .fc-event-container > a:nth-child(3) {
        background-color: #ffd061;
        border-color: #ffd061;
    }

    .fc-event-container > a:nth-child(4) {
        background-color: #52db9a;
        border-color: #52db9a;
    }

    .fc-event-container > a:nth-child(5) {
        background-color: #70d3e6;
        border-color: #70d3e6;
    }

    /* 去掉下面空白部分 */
    .fc-widget-content > .fc-scroller.fc-time-grid-container {
        height: auto !important;
    }

    .fc-time-grid .fc-slats + .fc-divider.fc-widget-header {
        display: none;
    }

    /** //日历样式设置end */
</style>
{/block}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-btn-group">
                        <button id="eCalendarPrevBtn" class="layui-btn icon-btn">
                            <i class="layui-icon">&#xe65a;</i>
                        </button>
                        <button id="eCalendarNextBtn" class="layui-btn icon-btn">
                            <i class="layui-icon">&#xe65b;</i>
                        </button>
                        <button id="eCalendarRefreshBtn" class="layui-btn icon-btn">
                            <i class="layui-icon">&#xe669;</i>
                        </button>
                        <a href="{:url('store/notice/add')}" class="layui-btn icon-btn ajax-iframe" data-width="650px" data-height="100%">
                            <i class="layui-icon">&#xe654;</i>添加日程
                        </a>
                    </div>

                </div>

            </div>
        </div>
        <div style="overflow: auto;">
            <div id="eCalendarTable" style="min-width: 800px;"></div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src='/static/hqui/libs/fullcalendar/core/main.js'></script>
<script src='/static/hqui/libs/fullcalendar/daygrid/main.js'></script>
<script src='/static/hqui/libs/fullcalendar/timegrid/main.js'></script>
<script>
    layui.use(['layer', 'form', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var util = layui.util;
        var admin = layui.admin;
        var mDataList = [];  // 当前的数据

        // 渲染日历
        var calendar = new FullCalendar.Calendar(document.getElementById('eCalendarTable'), {
            plugins: ['timeGrid'],
            defaultView: 'timeGridWeek',
            locale: 'zh-cn',
            firstDay: 1,
            header: false,
            allDaySlot: true,
            columnHeaderFormat: {month: 'numeric', day: 'numeric', omitCommas: true, weekday: 'short'},
            minTime: '08:00:00',
            maxTime: '22:00:00',
            height:'auto',
            slotEventOverlap:true,
            events: function (option, callback) {
                console.log(option.start);  // 当前选中周的第一天
                layer.load(2);
                $.get("{:url('store/notice/index_json')}", {
                    date: util.toDateString(option.start, 'yyyy-MM-dd')   // 此参数传给后端做数据筛选
                }, function (res) {
                    layer.closeAll('loading');
                    var dataList = [];
                    if (res.code == 0) {
                        mDataList = res.data;
                        //mDataList = processData(mDataList);
                        for (var i = 0; i < mDataList.length; i++) {
                            var one = mDataList[i];
                            dataList.push({
                                allDay:true,
                                start: util.toDateString(one.startDate, 'yyyy-MM-dd') + ' ' + one.startTime,
                                end: util.toDateString(one.endDate, 'yyyy-MM-dd') + ' ' + one.endTime,
                                title: one.courseName,
                                id: one.courseId,
                                url:"{:url('store/notice/detail')}?date=" + one.startDate
                            });
                        }
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                    callback(dataList);
                }, 'json');
            },
            eventClick: function (info) {
                console.log(info.event.id);  // 点击的数据id
                // 根据id获取对应的数据
                // for (var i = 0; i < mDataList.length; i++) {
                //     if (info.event.id == mDataList[i].courseId) {
                //         layer.alert(JSON.stringify(mDataList[i]), {title: '你点击的数据是：', shadeClose: true});
                //         break;
                //     }
                // }
            }
        });
        calendar.render();


        // 上一周
        $('#eCalendarPrevBtn').click(function () {
            calendar.prev();
        });

        // 下一周
        $('#eCalendarNextBtn').click(function () {
            calendar.next();
        });

        // 刷新
        $('#eCalendarRefreshBtn').click(function () {
            calendar.refetchEvents();
        });

    });
</script>
{/block}